<template>
  <div>
    <vxe-toolbar>
      <template #buttons>
        <a-input-search
          placeholder="根据成品名称查询"
          style="width: 200px"
          v-model:value="ApiData.productName"
          @search="onSearch"
        />
        <a-button
          style="margin: 0 10px"
          @click="$refs.OutputPoup.visible = true"
        >
          新增成品
        </a-button>
      </template>
    </vxe-toolbar>

    <vxe-table
      border
      show-header-overflow
      show-overflow
      highlight-hover-row
      :align="allAlign"
      :data="tableData"
    >
      <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
      <vxe-table-column
        field="productName"
        title="成品名称"
        min-width="200"
      ></vxe-table-column>
      <vxe-table-column
        field="productPrice"
        min-width="100"
        title="成品成本价格（分）"
      ></vxe-table-column>
      <vxe-table-column title="成品图片" min-width="100">
        <template #default="{ row }">
          <a-avatar :src="row.productImage" />
        </template>
      </vxe-table-column>

      <vxe-table-column title="创建时间" min-width="220">
        <template #default="{ row }">
          <a-button type="link">
            {{ tenBitTimestamp(row.createTime) }}
          </a-button>
        </template>
      </vxe-table-column>
      <vxe-table-column title="所需原材料" min-width="200">
        <template #default="{ row }">
          <a-button
            type="primary"
            shape="circle"
            @click="toDis(row)"
            style="margin-right: 10px"
          >
            <i class="iconfont icon-hj"></i>
          </a-button>
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作" min-width="150">
        <template #default="{ row }">
          <!-- 出库 -->
          <a-button
            type="primary"
            shape="circle"
            ghost
            @click="outPut(row)"
            style="margin-right: 10px"
          >
            <i class="iconfont icon-chuku"></i>
          </a-button>
          <!-- 编辑 -->
          <a-button
            type="primary"
            shape="circle"
            ghost
            @click="editor(row)"
            style="margin-right: 10px"
          >
            <i class="iconfont icon-bianji"></i>
          </a-button>

          <a-popconfirm
            title="确定删除该成品?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="deleteAdmin(row)"
          >
            <a-button type="danger" shape="circle" ghost>
              <i class="iconfont icon-shanchu"></i>
            </a-button>
          </a-popconfirm>
        </template>
      </vxe-table-column>
    </vxe-table>
    <a-pagination
      show-quick-jumper
      :default-current="1"
      :total="totalNum"
      @change="onChange"
    />
    <!-- 操作弹窗 -->
    <output-poup ref="OutputPoup" />
    <!-- dis -->
    <dis ref="dis" />
    <!-- 出库 -->
    <out-stock ref="OutStock" />
  </div>
</template>

<script>
import { thirteenBitTimestamp } from '@/utils/index'
import { productList, deleteEndProduct } from '@/api/endProduct'
import OutputPoup from './components/output-poup'
import Dis from './components/dis'
import OutStock from './components/outstock-poup'
export default {
  components: {
    OutputPoup,
    Dis,
    OutStock,
  },
  data() {
    return {
      allAlign: 'center',
      // api请求数据
      ApiData: {
        pageNum: 1,
        pageSize: 10,
        productName: '',
        type: 0,
      },
      // 表数据
      tableData: [],
      // 数据总条数
      totalNum: 0,
    }
  },
  watch: {
    ApiData: {
      handler(newV, oldV) {
        // 监听 输入框为空得时候就搜索 全部数据
        if (newV.productName === '' || newV.productName === null) {
          this.ApiData.type = '0'
          this.getProductList()
        }
      },
      deep: true,
    },
  },
  created() {
    this.getProductList()
  },
  methods: {
    onChange(pageNumber) {
      this.ApiData.pageNum = pageNumber
      this.getProductList()
    },
    /**
     * 获取成品列表
     */
    getProductList() {
      productList(this.ApiData).then((res) => {
        this.tableData = res.queryResult.list
        this.totalNum = res.queryResult.total
      })
    },
    /**
     * 时间撮传话
     */
    tenBitTimestamp(time) {
      return thirteenBitTimestamp(time)
    },
    /**
     * 编辑
     */
    editor(info) {
      var form = {
        id: info.id,
        productName: info.productName,
        productPrice: info.productPrice,
        productImage: info.productImage,
        // 原料list
        originalProductList: [],
      }
      console.log(info)
      //添加 原材料
      if (info.srProductMapList.length > 0) {
        info.srProductMapList.map((v) => {
          form.originalProductList.push({
            productId: v.originalProductId,
            productNum: v.productNum,
            productMapId: v.id,
          })
        })
      }
      this.$refs.OutputPoup.apiForm = form
      // 此时为编辑
      this.$refs.OutputPoup.isEditor = true
      this.$refs.OutputPoup.visible = true
    },
    /**
     * 删除成品
     */
    deleteAdmin(Info) {
      deleteEndProduct(Info.id).then((res) => {
        this.$message.success('删除成功')
        this.getProductList()
      })
    },
    /**
     * 通过名称搜索 成品数据
     */
    onSearch() {
      // 0 全部 1.根据成品名称查询
      this.ApiData.type = '1'
      this.getProductList()
    },
    toDis(info) {
      this.$refs.dis.info = info
      this.$refs.dis.visible = true
    },
    outPut(info) {
      this.$refs.OutStock.apiForm.endProductId = info.id
      this.$refs.OutStock.apiForm.endProductName =info.productName
      this.$refs.OutStock.visible = true
    },
  },
}
</script>

<style lang="less" scoped>
</style>